<template>
  <div class="left-chart-1">
    <div class="left-chart-top">
      <div class="lc1-header">订单交易总数</div>
      <div class="lc1-details">
        <span>{{ ordersCount }}件</span>
      </div>
      <dv-decoration-3 class="decoration" />
    </div>
    <div class="left-chart-bottom">
      <div class="lc1-header">公司所占比例</div>
      <dv-active-ring-chart
        class="ring-chart"
        :config="ordersCountGroupByCompany"
      />
    </div>
  </div>
</template>
<script>
import {
  getOrdersCount,
  getOrdersCountGroupByCompany,
} from "../../../Api/leadership/logistics";
export default {
  name: "LeftChart1",
  data() {
    return {
      ordersCount: 0,
      ordersCountGroupByCompany: {
        data: [],
        colors: ["#00baff", "#3de7c9", "#fff", "#ffc530", "#469f4b"],
        unit: "件",
      },
    };
  },
  methods: {
    async setOrdersCount() {
      const { data: res } = await getOrdersCount();
      if (res.statusCode !== 20000) {
        console.error(res.message);
      } else {
        this.ordersCount = res.data;
      }
    },
    async setOrdersCountGroupByCompany() {
      const { data: res } = await getOrdersCountGroupByCompany();
      if (res.statusCode !== 20000) {
        console.error(res.message);
      } else {
        this.ordersCountGroupByCompany.data = res.data.map((item) => ({
          name: item.logistics_company,
          value: Number(item.count),
        }));
        this.ordersCountGroupByCompany = { ...this.ordersCountGroupByCompany };
      }
    },
  },
  created() {
    this.setOrdersCount();
    this.setOrdersCountGroupByCompany();
  },
};
</script>

<style lang="scss" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  .left-chart-top {
    flex: 1;
    flex-grow: 0;
    .lc1-header {
      padding: 20px 0;
    }
    .lc1-details {
      color: #7acaec;
      font-size: 30px;
    }
    .decoration {
      height: 30px;
      width: 100%;
      overflow: hidden;
    }
  }
  .left-chart-bottom {
    flex: 3;flex-grow: 0;
    .lc1-header {
      padding-top: 30px;
    }
    .ring-chart {
      width: 100%;
      height: 250px;
    }
  }
}
</style>
